<template>
  <div class="pug-ui-tab">
     <table>
       <thead>
          <tr>
            <th>id</th>
            <th>标题</th>
            <th>描述</th>
            <th>name的方式访问</th>
            <th>动态参数params</th>
            <th>动态参数query</th>
            <th>props注入</th>
          </tr>
       </thead>
       <tbody>
         <tr v-for="(book,index) in bookList" :key="book.id+index">
           <td>{{book.id}}</td>
           <td>{{book.title}}</td>
           <td>{{book.desc}}</td>
           <td>
             <router-link :to="{name:'bookdetail1',params:{id:book.id}}">查看明细 params</router-link>
             <router-link :to="{name:'bookdetail2',query:{id:book.id}}">查看明细 query</router-link>
           </td>
           <td>
              <router-link :to="'/book/'+book.id">查看明细</router-link>
              <router-link :to="`/book/${book.id}`">查看明细2</router-link>
              <a :href="'/book/'+book.id">查看明细a</a>
           </td>
           <td>
             <router-link :to="'/book2?id='+book.id">查看明细</router-link>
             <a :href="'/book2?id='+book.id">查看明细 a</a>
           </td>
           <td>
             <router-link :to="`/bookdetail/${book.id}/${book.title}`">查看明细props</router-link>
           </td>
         </tr>
       </tbody>
     </table>
  </div>
  <hr>
  <router-view></router-view>
</template>

<script>
import Books from '@/service/Books'
export default {
  name: "Home",
  data() {
    return {
      bookList: Books
    }
  }
}
</script>

<style>
  .pug-ui-tab{background:#eee;padding:30px;}
  .pug-ui-tab table{width: 100%;border-collapse: collapse}
  .pug-ui-tab th,.pug-ui-tab td{text-align: left;border:1px solid #666;padding:4px;}

</style>